import { useDrag } from 'react-dnd'

export interface MaterialItemProps {
  name: string
  desc: string
}

const MaterialItem = (props: MaterialItemProps) => {

  const { name, desc } = props

  const [_, drag] = useDrag({
    type: name,
    item: {
      type: name
    }
  })

  return <div ref={drag as any} className="border-dashed border-[1px] border-[#000] 
  py-[8px] px-[10px] m-[10px] cursor-move inline-block bg-white hover:bg-[#ccc]">
    {desc}
  </div>
}

export default MaterialItem